Project Planning
Hypothesis:
If we cater the Home Page towards the user's needs, then they will be able navigate more intuitively and joyfully toward products that they love.
This project was undertaken outside of my usual Scrum team which gave me an exciting opportunity to lead, coordinate and educate a small team of people who are less familiar with a user-centred design process.
I was allocated 2 months (4 sprints) to solve this challenge, so I set out a roadmap which revolved around business & user problem framing, user research and low fidelity white-boarding ideation sessions with frequent stakeholder feedback.
Homepage 4 Sprint project plan
1. Defining Project Requirements
I began by collecting the existing quantitive data that we had on this page to allow for informed conversations and user centred decision-making later on.
The next step was to conduct individual interviews with key stakeholders to discern the business needs and to identify the KPI's that this project should move to be deemed measurably successful.
The next step was to conduct individual interviews with key stakeholders to discern the business needs and to identify the KPI's that this project should move to be deemed measurably successful.
All of the information was then gathered and the goals of the project were defined and then further refined with key stakeholders to reveal 3 key business goals.
2. Problem Framing
The next step was to conduct an analysis on the current Homepage based on our business goals, benchmarking and UX best practices.
Original Mister Spex Home Page
Using these points, I facilitated a small seminar / workshop with stakeholders on the what, why and how to define UX research questions. We then collected all questions and prioritised them, ready for testing.
To validate our hypotheses, I collaborated with a UX researcher to conduct an in-house focus group combined, in part, with a card sorting exercise.
This test allowed us to:
• Explore specific themes surrounding the page's content.
• Open a focussed discussion on these themes.
• Prioritise items individually followed by a collective discussion of decisions made.
During analysis of the results, the user's needs and conceptual understandings this point in their journey became clear to us.
Refined and categorised research results
Once the analysis was complete, I reported the results to the stakeholders and updated the project goals so that the project was driven by a combination of both business and user needs.
3. Ideation
Iteration 1
• Rapid paper prototyping / whiteboarding ideation.
• Mobile-first approach as mobile traffic was the largest at this point in the user journey.
• Reference to benchmarking, test results and project goals.
• Early concept, ready for feedback.
• Stakeholder review at the end of the day.
• Reference to benchmarking, test results and project goals.
• Early concept, ready for feedback.
• Stakeholder review at the end of the day.
Ideation - First Iteration progress
Iteration 2
• Integration of stakeholder feedback
• Further ideation on usability problems
• Inspiration taken from benchmarking of relevant ecommerce services
• Second round of iterative stakeholder feedback
Ideation - Second Iteration progress
Iteration 3
• Detailed inclusion of stakeholder feedback.
• A mutually beneficial compromise between business and user needs was achieved.
• Prioritisation of elements based on test data, and project goals.
• Last round of stakeholder feedback and agreeance on design.
Ideation - Third Iteration progress
Continuously referencing test results and benchmarking ensured that ideas were backed up by user insight, resulting in concentration on problems that needed solving rather than on assumptions.
Iterative stakeholder reviews created a rapid feedback loop which:
• Opened a transparent channel of communication between project team and stakeholders.
• Ensured that feedback / ideas were developed with the concept the very next day.
4. Wireframing
I then created a wireframe in order to more accurately define the layout, sizing and spacing of the page without getting unnecessarily focussed on detailed elements such as colour / imagery at this point in the project.
Wireframe
Throughout the design development process, I recorded open questions so that we have a prepared list of research questions that could be observed during the next iteration of testing.
Future Research Questions / Observations
5. High Fidelity Design (A/B Test)
Due to the high amount of graphic and photographic content on the page, I collaborated with a graphic designer to combine design system elements, UX practices / insight and polished imagery.
High Fidelity Mockup - for A/B Test
The design was then developed with the intention of going into an A/B test to ensure that it improved the KPI's that had been previously set.
Whilst waiting for the development of the page, I proceeded to conduct a lower fidelity guerrilla test with users so that we could receive earlier insight into how the update had impacted the users needs that were previously recorded.
Results:
• Content was seen as much more relevant to the users needs.
• Flow of the page was easy to comprehend.
• Intuitive Navigation to more precise selections of products.
• Inspiration on style / trends was easily found and enjoyed.
• USP's were understood and seen as relevant.
• Product selection was more inclusive for all users, regardless if they are driven by gender or not.
6. Next Steps
Due to a strategic change in the companies product development direction, this project is still awaiting build completion and release.
Upon completion, my next steps will be as follows:
1) Analyse the whole page A/B test results
2) Assemble Hotjar heat maps for the page to gain quantitative user click and scroll data.
3) Using my precompiled list of research questions, I would conduct various A/B tests to optimise the content.
4) Kick off a second iteration by defining new project goals and conducting another round of qualitative testing.
